import {Form, Modal} from 'antd';
import {useEffect, useRef, useState} from 'react';
import WTableSetting from '@/component/param-setting/widgets/w-table-setting';

export default function WSetting(props: any) {
  const {onSave, onChange, value, ...res} = props;
  const [form] = Form.useForm();
  const ref = useRef<any>();
  const [isModalVisible, setIsModalVisible] = useState(false);

  useEffect(() => {
    form.setFieldsValue({values: value});
  }, []);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    const formList = ref.current.formList.map((item: any) => item.validateFields());
    Promise.all(formList).then(res => {
      onChange?.(res);
      setIsModalVisible(false);
    });
    // form.validateFields().then((res) => {
    //   const formValue = form.getFieldsValue();
    //   onChange?.(formValue?.values);
    //   onSave();
    //   setIsModalVisible(false);
    // });
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <>
      <span style={{color: '#1890ff', cursor: 'pointer'}} onClick={showModal}>
        设置
      </span>
      <Modal
        title="设置"
        width={800}
        visible={isModalVisible}
        onOk={handleOk}
        destroyOnClose={true}
        onCancel={handleCancel}
      >
        <WTableSetting value={value} ref={ref}/>
      </Modal>
    </>
  );
}
